﻿//button控件，继承自Control控件，需要tools.js、proto.js、Animate.js模块，Control基类

if (!window.wkh.classes) {
    window.wkh.classes = {
        controls: {}
    };
}

if (!window.wkh.classes.controls) {
    window.wkh.classes.controls = {};
}

wkh.classes.controls.Button = (function () {
    var base = wkh.classes.controls.Control;//基类
    var basePro = base.prototype;//基类原型

    var buttonNum = 0;//button数量

    var pri;//私有变量

    var style = {
        lightgray: [
            {
                filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffd9d9d9',GradientType=0)",
                backgroundImage: "linear-gradient(rgb(255, 255, 255), rgb(217, 217, 217))",
                borderRadius: "4px",
                borderColor: "#d9d9d9 #d9d9d9 #b3b3b3 #c5c5c5",
                borderStyle: "solid",
                borderWidth: "1px",
                boxShadow: "inset 0px 1px 0px rgba(255,255,255,0.2), 1px 1px 2px rgba(0,0,0,0.05)"
            },//div Style
            {
                borderRadius: "3px",
                border: "0 none white",
                backgroundColor: "transparent",
                color: "#333",
                fontWeight: "bolder",
            },//button Style
            {
                backgroundColor: "rgb(240, 240, 240)"
            },//hover Style
            {
                backgroundColor: "rgb(230,230,230)",
                boxShadow:"inset 2px 2px 5px rgba(0,0,0,0.1)"
            },//click Style
            {
                color: "gray",
                backgroundColor:"rgb(240,240,240)"
            }//disable Style
        ]
    };

    function initAnimate(obj) {
        if (!obj.isUserSetAnimate) {
            var hoverStyle = obj.hoverStyle;
            var button = obj.element.children[0];

            var aniObj = {};
            for (var css in hoverStyle) {
                aniObj[css] = [button.css(css), hoverStyle[css]];
            }

            obj.animate = new wkh.classes.Animates(button, aniObj, 250);
        }
    }

    function initStyle(obj) {
        obj.nowStyle = obj.animate.getStartStyle();
        obj.hoverStyle = obj.animate.getEndStyle();
    }

    function initBase(initObj, div, width, height, name, style) {
        var preN = base.getNum();
        base.call(initObj, div, width || "", height || "", name, style);
        var nowN = base.getNum();
        if (nowN > preN) {
            ++buttonNum;
        }
    }

    function classButton(div, setting) {//setting:style,width,height,name,isMove,isDisabled,isAnimate
        //setting包括继承自Control的width,height,style
        this.__wkh_private_getButtonPrivate = function () {
            pri = privateVar;
        };

        setting = setting || {};
        if (!setting.style) {
            setting.style = "lightgray";
        }

        switch (setting.style) {
            case "lightgray":
                setting.style = style.lightgray;
                setting.isAnimate = false;
                break;

            default:
                break;
        }

        var privateVar = {
            element: div,
            name: setting.name || "Button",
            buttonStyle: setting.style[1] || {},
            isMove: setting.isMove === false ? false : true,
            isDisabled: setting.isDisabled || false,

            nowStyle: null,
            hoverStyle: setting.style[2] || {},
            clickStyle: setting.style[3] || {},
            disabledStyle: setting.style[4] || {},
            animate: null,
            isAnimate: setting.isAnimate || false,
            isUserSetAnimate: false,

            eventList: [{}/*isCapture默认为false*/, {}]
        };

        initBase(this, div, setting.width, setting.height, privateVar.name, setting.style[0] || {});

        div.getClassList().add("__wkh_private_Button");

        var innerDiv = document.createElement("div");

        innerDiv.css({ display: "table", userSelect: "none", width: "100%", height: "100%" });
        div.onselectstart = function () { return false; };
        div.appendChild(innerDiv);

        var button = document.createElement("div");

        button.css({
            backgroundColor:"rgb(240,240,240)",
            border: "rgb(112, 112, 112) 1px solid",
        });
        button.css(privateVar.buttonStyle);
        button.css({
            width: "100%",
            height: "100%",
            boxSizing: "border-box",
            textOverflow: "ellipsis",
            display: "table-cell",
            textAlign: "center",
            verticalAlign: "middle",
            cursor: "default",
            padding: 0,
            margin: 0
        });

        button.innerText = privateVar.name;
        innerDiv.appendChild(button);


        classButton.prototype.addEventListener.call(this, "mouseenter", function (e) {
            if (privateVar.isAnimate) {
                privateVar.animate.doAnimate();
            } else {
                e.target.css(privateVar.hoverStyle);
            };
        });

        classButton.prototype.addEventListener.call(this, "mouseleave", function (e) {
            if (privateVar.isAnimate) {
                privateVar.animate.doAnimate(true);
            } else {
                e.target.css(privateVar.nowStyle);
            }
        });

        if (privateVar.isMove) {
            var cssText;
            classButton.prototype.addEventListener.call(this, "mousedown", function down(e) {
                cssText = button.style.cssText;
                button.css({ position: "relative", paddingLeft: "1px", paddingTop: "2px" });
                button.css(privateVar.clickStyle);
                document.addEventListener("mouseup", function up(e) {
                    button.style.cssText = cssText;
                    document.removeEventListener("mouseup", up);
                });
            });
        }

        initAnimate(privateVar);
        initStyle(privateVar);
    }

    classButton.prototype = Object.create(basePro);//继承
    classButton.prototype.className = "Button";

    classButton.prototype.setAnimate = function (animate) {
        this.__wkh_private_getButtonPrivate();

        pri.animate = animate;
        pri.isUserSetAnimate = true;
        initStyle(pri);
    };

    classButton.prototype.getAnimateElement = function () {
        this.__wkh_private_getButtonPrivate();

        return pri.element.children[0];
    };

    classButton.prototype.addEventListener = function (type, fn, isCapture) {
        this.__wkh_private_getButtonPrivate();


        var eventList;
        if (isCapture) {
            eventList = pri.eventList[1];
        } else {
            eventList = pri.eventList[0];
        }


        if (!eventList[type]) {
            eventList[type] = [];
        }

        if (eventList[type].contains(fn) === -1) {
            eventList[type].push(fn);
        }

        if (!pri.isDisabled) {
            pri.element.children[0].addEventListener(type, fn, isCapture);
        }
    };

    classButton.prototype.removeEventListener = function (type, fn, isCapture) {
        this.__wkh_private_getButtonPrivate();


        var eventList;
        if (isCapture) {
            eventList = pri.eventList[1];
        } else {
            eventList = pri.eventList[0];
        }
        if (eventList[type]) {
            var fnList = eventList[type];
            fnList.remove(fnList.contains(fn));
            if (fnList.length === 0) {
                delete eventList[type];
            }
        }

        if (!pri.isDisabled) {
            pri.element.children[0].removeEventListener(type, fn, isCapture);
        }
    };

    classButton.prototype.click = function (fn) {
        classButton.prototype.addEventListener.call(this, "click", fn);
    }

    classButton.prototype.removeClick = function (fn) {
        classButton.prototype.removeEventListener.call(this, "click", fn);
    }

    var cssText=""
    classButton.prototype.setDisable = function () {
        this.__wkh_private_getButtonPrivate();
        var eventList0 = pri.eventList[0];
        var eventList1 = pri.eventList[1];

        var button = pri.element.children[0];

        for (var type in eventList0) {
            eventList0[type].forEach(function (fn) {
                button.removeEventListener(type, fn);
            });
        }
        for (var type in eventList1) {
            eventList1[type].forEach(function (fn) {
                button.removeEventListener(type, fn, true);
            });
        }
        
        cssText = button.style.cssText;
        button.css(pri.disabledStyle);
        pri.isDisabled = true;
    }

    classButton.prototype.setEnable = function () {
        this.__wkh_private_getButtonPrivate();
        var eventList0 = pri.eventList[0];
        var eventList1 = pri.eventList[1];

        var button = pri.element.children[0];

        for (var type in eventList0) {
            eventList0[type].forEach(function (fn) {
                button.addEventListener(type, fn);
            });
        }
        for (var type in eventList1) {
            eventList1[type].forEach(function (fn) {
                button.addEventListener(type, fn, true);
            });
        }

        button.style.cssText = cssText;
        pri.isDisabled = false;
    };

    classButton.prototype.setInnerHTML = function (HTML) {
        this.__wkh_private_getButtonPrivate();
        pri.element.children[0].innerHTML = HTML;
    };

    classButton.getNum = function () {
        return buttonNum;
    };
    classButton.__wkh_private_className = "Button";

    return classButton;
}());
